<script type="module" setup>
import HelloWorld from './components/HelloWorld.vue'
//在Vue3中不支持默认响应是
//需要导入 vue组件 使用里面的方法ref
import {ref} from 'vue' /* 工程化自带vue */
/* import {ref} from 'vue'这句代码翻译为：导入vue中的ref方法 */
/* let num = 10 */
// 使用响应式定义变量
/* let num = ref(10);
//定义方法
function jian(){
  num.value--
  console.log("- "+num.value)
}
function add(){
  num.value++
  console.log("+ "+num.value)
} */

//========================
//文本渲染
let message1 = "年轻人"
let message2 = "老年人"
let age = 19;
//===================
//条件渲染

//===================
//列表渲染==》用于遍历数组中内容
let arr = [
  {di:1,name:"李华"},
  {di:1,name:"李华"},
  {di:1,name:"李华"},
  {di:1,name:"李华"}
]

</script>

<template>
 
  <div>
    <table cellpadding="20" cellspacing="0">
      <tr>
        <th>编号</th>
        <th>姓名</th>
      </tr>
      <tr v-for="use in arr" :key="use.di">
        <th>{{ use.di }}</th>
        <th>{{ use.name }}</th>
      </tr>
    </table>
  </div>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
